<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推理分析 - 消防大模型应用平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
     
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-blue-600 text-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <i class="fas fa-fire-extinguisher text-2xl mr-2"></i>
                    <span class="text-xl font-bold">消防大模型应用平台</span>
                </div>
                <div class="hidden md:flex space-x-4">
                    <a href="index.html" class="hover:bg-blue-700 px-3 py-2 rounded">首页</a>
                    <a href="knowledge.html" class="hover:bg-blue-700 px-3 py-2 rounded">知识库</a>
                    <a href="report.html" class="hover:bg-blue-700 px-3 py-2 rounded">报告生成</a>
                    <a href="analysis.html" class="hover:bg-blue-700 px-3 py-2 rounded">案件分析</a>
                    <a href="reasoning.html" class="bg-blue-700 px-3 py-2 rounded">推理分析</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="max-w-7xl mx-auto px-4 py-8">
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">推理分析</h1>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                <i class="fas fa-plus mr-2"></i>新建分析
            </button>
        </div>

        <!-- 案件选择 -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
            <h2 class="text-2xl font-bold mb-6">选择案件</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-gray-700 mb-2">案件编号</label>
                    <input type="text" class="w-full px-4 py-2 border rounded-lg" placeholder="请输入案件编号">
                </div>
                <div>
                    <label class="block text-gray-700 mb-2">案件类型</label>
                    <select class="w-full px-4 py-2 border rounded-lg">
                        <option>火灾事故</option>
                        <option>爆炸事故</option>
                        <option>其他事故</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 分析结果展示 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- 起火原因分析 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-2xl font-bold mb-6">起火原因分析</h2>
                <div class="space-y-4">
                    <div class="border rounded-lg p-4">
                        <h3 class="font-semibold mb-2">可能原因</h3>
                        <div class="space-y-2">
                            <div class="flex items-center">
                                <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
                                <span class="text-gray-600">电气故障（可能性：85%）</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
                                <span class="text-gray-600">人为纵火（可能性：45%）</span>
                            </div>
                            <div class="flex items-center">
                                <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
                                <span class="text-gray-600">自然因素（可能性：20%）</span>
                            </div>
                        </div>
                    </div>
                    <div class="border rounded-lg p-4">
                        <h3 class="font-semibold mb-2">证据支持</h3>
                        <ul class="list-disc list-inside text-gray-600 space-y-2">
                            <li>现场发现短路痕迹</li>
                            <li>监控显示异常电流波动</li>
                            <li>目击者证言</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 火势蔓延路径 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-2xl font-bold mb-6">火势蔓延路径</h2>
                <div id="spreadChart" class="h-96"></div>
            </div>

            <!-- 环境因素分析 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-2xl font-bold mb-6">环境因素分析</h2>
                <div class="space-y-4">
                    <div class="border rounded-lg p-4">
                        <h3 class="font-semibold mb-2">气象条件</h3>
                        <ul class="list-disc list-inside text-gray-600 space-y-2">
                            <li>温度：25℃</li>
                            <li>湿度：65%</li>
                            <li>风速：3级</li>
                        </ul>
                    </div>
                    <div class="border rounded-lg p-4">
                        <h3 class="font-semibold mb-2">建筑结构</h3>
                        <ul class="list-disc list-inside text-gray-600 space-y-2">
                            <li>钢筋混凝土结构</li>
                            <li>建筑面积：5000㎡</li>
                            <li>楼层数：5层</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 推理结论 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-2xl font-bold mb-6">推理结论</h2>
                <div class="space-y-4">
                    <div class="border rounded-lg p-4">
                        <h3 class="font-semibold mb-2">主要结论</h3>
                        <p class="text-gray-600">根据现有证据和数据分析，该起火灾事故最可能由电气故障引发，起火点位于一楼配电室，火势通过通风管道向上蔓延。</p>
                    </div>
                    <div class="border rounded-lg p-4">
                        <h3 class="font-semibold mb-2">建议措施</h3>
                        <ul class="list-disc list-inside text-gray-600 space-y-2">
                            <li>加强电气设备定期检查</li>
                            <li>完善通风管道防火措施</li>
                            <li>优化消防设施布局</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white mt-12">
        <div class="max-w-7xl mx-auto px-4 py-8">
            <div class="text-center">
                <p>© 2024 消防大模型应用平台. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // 初始化火势蔓延路径图表
        const spreadChart = echarts.init(document.getElementById('spreadChart'));
        spreadChart.setOption({
            title: {
                text: '火势蔓延路径'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['起火点', '1层', '2层', '3层', '4层', '5层']
            },
            yAxis: {
                type: 'value',
                name: '火势强度'
            },
            series: [{
                data: [0, 30, 60, 80, 90, 100],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#ff4d4f'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(255, 77, 79, 0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255, 77, 79, 0.1)'
                        }
                    ])
                }
            }]
        });
    </script>
</body>
</html> 